<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="mt-4 p-5 bg-info  text-white rounded">
        <h1>我的第二个 Bootstrap 页面  表格</h1>
      <p>使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。</p> 
      </div>
      
      <div class="table-responsive ">
        <table class="table   table-bordered table-hover">
          <thead class="table-light">
            <tr>
              <th scope="col">Column 1</th>
              <th scope="col">Column 2</th>
              <th scope="col">Column 3</th>
            </tr>
          </thead>
          <tbody>
            <tr >
              <td scope="row">R1C1</td>
              <td>R1C2</td>
              <td>圆角图片<img src="src/img/1.png" class="rounded" alt=""  width="100px" height="75px"></td>
            </tr>
            <tr >
              <td scope="row">Item</td>
              <td>Item</td>
              <td>椭圆图片<img src="src/img/1.png" class="rounded-circle" alt=""  width="120px" height="90px"></td>
            </tr>
            <tr >
              <td scope="row">Item</td>
              <td>Item</td>
              <td>缩略图<img src="src/img/1.png" class="img-thumbnail" alt=""  width="120px" height="90px"></td>
            </tr>
            <tr >
              <td scope="row">Item</td>
              <td>Item</td>
              <td>左对齐--缩略图<img src="src/img/1.png" class="img-thumbnail float-start" alt=""  width="120px" height="90px">
                <img src="src/img/1.png" class="img-thumbnail" alt="没有设置对齐"  width="120px" height="90px">
              </td>
            </tr>
            <tr >
              <td scope="row">Item</td>
              <td>Item</td>
              <td>右对齐--缩略图<img src="src/img/1.png" class="img-thumbnail float-end" alt=""  width="120px" height="90px">
                <img src="src/img/2.jpg" class="img-thumbnail" alt="没有设置对齐"  width="120px" height="90px">
              </td>
            </tr>
            <tr >
              <td scope="row">Item</td>
              <td>Item</td>
              <td>居中--缩略图<img src="src/img/1.png" class="img-thumbnail mx-auto d-block" alt=""  width="120px" height="90px">
                <img src="src/img/2.jpg" class="img-thumbnail" alt="没有设置对齐"  width="120px" height="90px">
              </td>
            </tr>
            <tr >
              <td scope="row">Item</td>
              <td>Item</td>
              <td>响应式图片--缩略图
                <img src="src/img/2.jpg" class="img-fluid" alt="没有设置对齐"  >
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      
    </div>
  </body>
</html>
